<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="美美狐后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3" rel="stylesheet"/>
    <link href="/css/animate.min.css?v=20210831" rel="stylesheet"/>
    <link href="/css/style.min.css?v=20210831" rel="stylesheet"/>
    <link href="/ruoyi/css/ry-ui.css?v=4.7.5" rel="stylesheet"/>
    <link href="/ajax/libs/smartwizard/smart_wizard_all.min.css?v=5.1.1" rel="stylesheet"/>

    <style type="text/css">label.error {
        position: inherit;
    }</style>

</head>
<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1><img alt="[ 美美狐 ]" src="../static/ruoyi.png" th:src="@{/ruoyi.png}"></h1>
                </div>
                <div class="m-b"></div>
                <h4>欢迎使用 <strong>美美狐 后台管理系统</strong></h4>
                <strong>已经注册过? <a th:href="@{/login}">直接登录&raquo;</a></strong>
            </div>
        </div>
        <div class="ibox">
            <div class="ibox-title">
                <h5>注册页面</h5>
            </div>
            <div class="ibox-content">
                <!--                    <form id="registerForm" class="form form-horizontal m-t">-->
                <div id="smartwizard">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#step-1"> 第一步 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-2"> 第二步 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-3"> 第三步 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-4"> 第四步 </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                            <div>
                                <form class="form form-horizontal m-t">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label is-required"
                                               style="color: #1a1a1a">用户名：</label>
                                        <div class="col-sm-6">
                                            <input id="username" name="username" class="form-control" type="text"
                                                   style="color: #1a1a1a; margin-top: 0px" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a">密码：</label>
                                        <div class="col-sm-6">
                                            <input id="password" name="password" class="form-control" type="password"
                                                   style="color: #1a1a1a; margin-top: 0px">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a">确认密码：</label>
                                        <div class="col-sm-6">
                                            <input id="confirmPassword" name="confirmPassword" class="form-control"
                                                   type="password" style="color: #1a1a1a; margin-top: 0px">
                                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请再次输入您的密码</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                            <div>
                                <form class="form form-horizontal m-t">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label is-required"
                                               style="color: #1a1a1a">手机号：</label>
                                        <div class="col-sm-6">
                                            <input id="phoneNumber" name="phoneNumber" class="form-control" type="text"
                                                   style="color: #1a1a1a; margin-top: 0px" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label is-required"
                                               style="color: #1a1a1a">验证码：</label>
                                        <div class="col-sm-3">
                                            <input id="smsCode" name="smsCode" class="form-control" type="text"
                                                   style="color: #1a1a1a; margin-top: 0px" required>
                                        </div>
                                        <div class="btn-box-tool">
                                            <input type="button" value="发送验证码" id="sendsms" style="margin-top: 2px"
                                                   disabled>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                            <div>
                                <form class="form form-horizontal m-t">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label is-required"
                                               style="color: #1a1a1a">学生姓名：</label>
                                        <div class="col-sm-6">
                                            <input id="studentName" name="studentName" class="form-control" type="text"
                                                   style="color: #1a1a1a; margin-top: 0px" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a">性别：</label>
                                        <div class="col-sm-4">
                                            <select name="sex" class="form-control m-b"
                                                    style="color: #1a1a1a; margin-top: 0px">
                                                <option value="0">男</option>
                                                <option value="1">女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a">出生日期：</label>
                                        <div class="col-sm-6">
                                            <input id="birthday" name="birthday" class="form-control date" type="date"
                                                   style="color: #1a1a1a; margin-top: 0px">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                            <div>
                                <form class="form form-horizontal m-t">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a">所属校区：</label>
                                        <div class="col-sm-8" id="element1">
                                            <div class="col-sm-3">
                                                <select class="province form-control m-b" data-first-title="选择省"
                                                        name="provinceCode" style="color: #1a1a1a">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <select class="city form-control m-b" data-first-title="选择市"
                                                        name="cityCode" style="color: #1a1a1a">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <select class="area form-control m-b" data-first-title="选择地区"
                                                        name="areaCode" style="color: #1a1a1a" id="area">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="color: #1a1a1a"> </label>
                                        <div class="col-sm-4">
                                            <select class="school form-control m-b" data-first-title="选择校区"
                                                    id="schoolId" name="schoolId" style="color: #1a1a1a">
                                                <option value="">请选择校区</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <!--                                            <label class="col-sm-3 control-label is-required" style="color: #1a1a1a">卡密：</label>-->
                                        <!--                                            <div class="col-sm-6">-->
                                        <!--                                                <input id="cardPassword" name="cardPassword" class="form-control" type="text" style="color: #1a1a1a">-->
                                        <!--                                            </div>-->
                                        <label class="col-sm-3 control-label is-required"
                                               style="color: #1a1a1a">验证码：</label>
                                        <div class="col-sm-3">
                                            <input type="text" name="validateCode" class="form-control code"
                                                   style="margin-top: 0px">
                                        </div>
                                        <div class="col-sm-3">
                                            <a href="javascript:void(0);" title="点击更换验证码">
                                                <img th:src="@{/captcha/captchaImage(type=${captchaType})}"
                                                     class="imgcode" width="85%"/>
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!--                    </form>-->
            </div>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            &copy; 2018-2022 All Rights Reserved. RuoYi <br>
        </div>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.5}"></script>
<script src="../static/ruoyi/register.js" th:src="@{/ruoyi/register.js}"></script>
<script src="/js/bootstrap.min.js?v=3.3.7"></script>
<!-- bootstrap-table 表格插件 -->
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3"></script>
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3"></script>
<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.18.3"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="/ajax/libs/validate/jquery.validate.min.js?v=1.19.3"></script>
<script src="/ajax/libs/validate/jquery.validate.extend.js?v=1.19.3"></script>
<script src="/ajax/libs/validate/messages_zh.js?v=1.19.3"></script>
<!-- bootstrap-table 表格树插件 -->
<script src="/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.18.3"></script>
<!-- 遮罩层 -->
<script src="/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
<script src="/ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
<script src="/ajax/libs/layer/layer.min.js?v=3.5.1"></script>
<script src="/ajax/libs/layui/layui.min.js?v=2.7.5"></script>
<script src="/ruoyi/js/common.js?v=4.7.5"></script>
<script src="/ruoyi/js/ry-ui.js?v=4.7.5"></script>


<script src="/ajax/libs/smartwizard/jquery.smartWizard.min.js?v=5.1.1"></script>
<th:block th:include="include :: jquery-cxselect-js"/>
<script th:inline="javascript">

    //四级联动
    var url = ctx + "register/cityData";
    $.cxSelect.defaults.jsonValue = "code";
    $.cxSelect.defaults.url = url;
    $('#element1').cxSelect({
        selects: ['province', 'city', 'area'],
        nodata: 'none'
    });

    $("#area").change(function () {//同上面一样
        $.ajax({
            url: ctx + "register/select",
            type: 'GET',
            data:{
                areaCode: $("#area").val(),
            },
            success: function (data) {
                $("#schoolId").empty();
                $("#schoolId").append("<option value=''>请选择校区</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#schoolId").append("<option value='" + data[i].schoolId + "'>" + data[i].name + "</option>");
                }
            }
        })
    });

    $(document).ready(function () {


        // 工具栏按钮
        var btnFinish = $('<a id="btn-finish"></a>').text('注册')
            .addClass('btn btn-info')
            .on('click', function () {
                // alert("test");
                register();
            });
        var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
            .addClass('btn btn-danger')
            .on('click', function () {
                $('#smartwizard').smartWizard("reset");
            });
        // 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
        var btnNext = $('<a id="btn-next"></a>').text('下一步')
            .addClass('btn btn-info')
            .on('click', function () {
                $('#smartwizard').smartWizard("next");
            });
        var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
            .addClass('btn btn-success disabled')
            .on('click', function () {
                $('#smartwizard').smartWizard("prev");
            });
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'arrows', // default, arrows, dots, progress
            autoAdjustHeight: false, // 自动调整高度, 默认true
            enableURLhash: false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                toolbarExtraButtons: [btnCancel, btnPrev, btnNext, btnFinish]// 扩展的按钮集合
            }
        });
    });

    function submit() {
        var data = {};
        $('.form').each(function (index, form) {
            // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
            $.each($(form).serializeArray(), function (i, field) {
                if (data[field.name]) {
                    data[field.name] += ("," + field.value);
                } else {
                    data[field.name] = field.value;
                }
            });
        });
        alert(JSON.stringify(data))
    }

    // 显示步骤时将触发事件
    $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
        // 下面按钮是快速操作栏的
        $("#prev-btn").removeClass('disabled');
        $("#next-btn").removeClass('disabled');
        // 下面按钮是工具栏的
        $("#btn-prev").removeClass('disabled');
        $("#btn-next").removeClass('disabled');
        $("#btn-finish").removeClass('disabled');
        if (stepPosition === 'first') {
            $("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").addClass('disabled');
            $("#btn-finish").addClass('disabled');
        } else if (stepPosition === 'last') {
            $("#next-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-next").addClass('disabled');
        } else {
            $("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").removeClass('disabled');
            $("#btn-next").removeClass('disabled');
            $("#btn-finish").addClass('disabled');
        }
    });

    // 该事件在离开某个步骤之前触发
    $("#smartwizard").on("leaveStep", function (e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
        if (stepDirection == 'forward') {
            var form = $("#step-" + (currentStepNumber + 1)).find('.form');
            if (form.length > 0) {
                if ((currentStepNumber + 1) == 1) {
                    console.log("第一步验证");

                    return form.validate({
                        rules: {
                            username: {
                                required: true,
                                minlength: 2
                            },
                            password: {
                                required: true,
                                minlength: 5
                            },
                            confirmPassword: {
                                required: true,
                                equalTo: "[name='password']"
                            }
                        },
                        messages: {
                            username: {
                                required: icon + "请输入您的用户名",
                                minlength: icon + "用户名不能小于2个字符"
                            },
                            password: {
                                required: icon + "请输入您的密码",
                                minlength: icon + "密码不能小于5个字符",
                            },
                            confirmPassword: {
                                required: icon + "请再次输入您的密码",
                                equalTo: icon + "两次密码输入不一致"
                            }
                        }
                    }).form()
                } else if ((currentStepNumber + 1) == 2) {

                    console.log("第二步验证");
                    return form.validate({
                        rules: {
                            phoneNumber: {
                                required: true,
                                isPhone: true
                            }
                        },
                        messages: {
                            phoneNumber: {
                                required: icon + "请再次输入您的手机号",
                                isPhone: icon + "手机号输入格式错误"
                            }
                        }
                    }).form()
                } else if ((currentStepNumber + 1) == 3) {

                    console.log("第二步验证");

                    return form.validate({
                        rules: {
                            studentName: {
                                required: true,
                                minlength: 2
                            }
                        },
                        messages: {
                            studentName: {
                                required: icon + "请再次输入学生姓名",
                                length: icon + "学生姓名不能小于2个字符"
                            }
                        }
                    }).form()
                }
                // return form.validate().form();
            }
            return true;
        }
        return true;
    });

    $("#theme-selector").on("change", function () {
        // Change theme
        var options = {
            theme: $(this).val()
        };
        $('#smartwizard').smartWizard("setOptions", options);
        return true;
    });

    $("#reset-btn").on("click", function () {
        // Reset wizard
        $('#smartwizard').smartWizard("reset");
        return true;
    });

    $("#prev-btn").on("click", function () {
        // Navigate previous
        $('#smartwizard').smartWizard("prev");
        return true;
    });

    $("#next-btn").on("click", function () {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });
</script>
</body>
</html>
